<template>
    <div class="body addres_list_check">
        <div
            id="address_list_html"
            style="height: calc(100% - 2.048rem); overflow: scroll"
        >
            <div
                class="address-list"
                v-for="(item, index) in address_list"
                :key="index"
            >
                <a
                    class="select_address address_id_140"
                    @click="checkaddres(item.address_id)"
                    ><div class="list-radio">
                        <input
                            type="radio"
                            :checked="item.is_default == 1"
                            value=""
                            name="address"
                        />
                    </div>
                    <div class="list-right">
                        <p class="p1">
                            <span>{{ item.consignee }}</span
                            ><span>{{ item.mobile }}</span>
                        </p>
                        <p class="p2">
                            {{ item.province_name }}
                            {{ item.city_name }}
                            {{ item.district_name }}
                            {{ item.address }}
                        </p>
                    </div></a
                >
                <a
                    class="list-modify address_item"
                    @click="
                        $router.push({
                            path: '/address_edit',
                            query: {
                                address_id: item.address_id,
                                isgoSubmit: true,
                            },
                        })
                    "
                >
                </a>
            </div>
        </div>

        <div class="j_newbutton">
            <div
                class="j_newbtn"
                @click="
                    $router.push({
                        path: '/address_edit',
                        query: {
                            isgoSubmit: true,
                        },
                    })
                "
            >
                +新增地址
            </div>
        </div>
        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            address_list: {},
        };
    },
    computed: {},
    mounted() {
        this.getAddreslist();
    },
    methods: {
        // 点击选择收获地址
        checkaddres(address_id) {
            this.$router.push({
                path: '/shopSubmit',
                query: { address_id: address_id },
            });
            // axiosPost(
            //     '/api/user/set_default',
            //     {
            //         id: address_id,
            //     },
            //     (res) => {
            //         if (res.status != 1) {
            //             return Toast({
            //                 message: res.msg,
            //                 duration: 2000,
            //             });
            //         }

            //         this.$router.push('/shopSubmit');
            //     }
            // );
        },
        // 获取收获地址列表
        getAddreslist() {
            axiosPost('/api/user/address_list', {}, (res) => {
                if (res.status != 1) {
                    return Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                }
                this.address_list = res.data.address_list;
            });
        },
    },
};
</script>

<style lang="less" scope>
.j_newbutton {
    position: fixed;
    left: 0;
    bottom: 0.5rem;
}

.addres_list_check {
    .address-list {
        width: 100%;
        padding: 0.667rem 0;
        border-bottom: 0.022rem solid #e6e6e6;
        position: relative;
        overflow: hidden;
    }
    .address-list .list-radio {
        float: left;
        width: 0.64rem;
        height: 0.64rem;
        position: absolute;
        left: 0.64rem;
        top: 50%;
        transform: translate(0, -50%);
    }
    .address-list .list-radio input {
        display: block;
        width: 0.64rem;
        height: 0.64rem;
        position: relative;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        border: none;
        z-index: 2;
    }
    .address-list .list-radio input::before {
        position: absolute;
        z-index: 3;
        content: '';
        width: 0.64rem;
        height: 0.64rem;
        background-image: url(../../assets/images/address-icon02.png);
        background-size: 0.64rem;
        background-repeat: no-repeat;
    }
    .address-list .list-radio input:checked::before {
        background-image: url(../../assets/images/address-icon01.png);
    }
    .address-list .list-right {
        width: 10.8rem;
        height: auto;
        float: left;
        margin-left: 2.091rem;
        overflow: hidden;
    }
    .address-list .list-right .p1 {
        font-size: 0.597rem;
        font-weight: bold;
        color: #333;
        line-height: 1.024rem;
    }
    .address-list .list-right .p1 span {
        margin-right: 0.661rem;
    }
    .address-list .list-right .p2 {
        font-size: 0.597rem;
        color: #666;
        line-height: 0.9rem;
    }
    .address-list .list-modify {
        z-index: 3;
        position: absolute;
        width: 1.4rem;
        height: 1.4rem;
        right: 0.256rem;
        top: 50%;
        transform: translate(0, -50%);
        background-image: url(../../assets/images/address-icon03.png);
        background-repeat: no-repeat;
        background-size: 0.768rem;
        background-position: center;
    }
    .createnew {
        position: fixed;
        width: 14.72rem;
        height: 1.963rem;
        border-radius: 0.213rem;
        left: 0.64rem;
        bottom: 0.64rem;
        font-size: 0.768rem;
        color: #fff;
        line-height: 1.963rem;
        text-align: center;
        z-index: 10;
    }
}
</style>
